<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			<view class="navbar">
				<Search></Search>
				<u-tabs :list="tabs" current="1">
					<view slot="right" @tap="$u.toast('插槽被点击')">
						<u-icon name="list" size="21" bold></u-icon>
					</view>
				</u-tabs>
			</view>
		</u-sticky>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view v-for="(item,index) in dataList" :key="index">
				<Items :index="index"></Items>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	import Items from "./components/Items.vue"
	import Search from "@/components/search/search.vue"
	import {
		getHomeGoodsGuessLikeAPI
	} from "@/api/home.js"
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
			Items,
			Search
		},
		data() {
			return {
				tabs: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				downOption: {},
				upOption: {
					page: {
						num: 0,
						size: 10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				dataList: []
			}
		},
		methods: {
			/*上拉加载的回调*/
			upCallback(page) {
				getHomeGoodsGuessLikeAPI({
					page: page.num,
					pageSize: page.size,
				}).then(({
					result
				}) => {
					// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(result.items.length, result.pages);
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(curPageLen, totalSize); 

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(curPageLen, hasNext); 

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
					//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					//如果传了hasNext,则翻到第二页即可显示无更多数据.
					//this.mescroll.endSuccess(curPageLen);

					//如果是第一页需手动置空列表
					if (page.num == 1) this.dataList = [];
					//追加新数据
					this.dataList = this.dataList.concat(result.items);
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #eee;

		.navbar {
			padding: 0 40rpx;
			box-sizing: border-box;
		}
	}
</style>